<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			html {
				/* 设置当前网页的视距为800px，人眼距离网页的距离 */
				perspective: 800px;
			}

			body {
				border: 1px red solid;
			}

			.box1 {
				width: 200px;
				height: 200px;
				background-color: #bfa;
				margin: 200px auto;
				transition: 2s;
			}
            .box1 img{
                width: 200px;
            }
			body:hover .box1 {
                /* 设置绕X轴旋转45度 */
                /* transform: rotateX(45deg); */
                /* 设置绕Z轴旋转1圈 */
                /* transform: rotateZ(1turn); */
                transform: rotateY(.5turn);
                /* backface-visibility用于设置是否显示图片的背面（图片的背面是该图片的镜面）
                默认值为visible，即可见，可设置为hidden，即隐藏
                 */
                backface-visibility: hidden;
			}
		</style>
	</head>
	<body>
		<div class="box1">
            <img src="./img1.jpg" alt="">
        </div>
	</body>
</html>
